<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>Dashboard - Ace Admin</title>

    <meta name="description" content="overview &amp; stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="/assets/css/bootstrap.css" />
    <link rel="stylesheet" href="/components/font-awesome/css/font-awesome.css" />

    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="/assets/css/ace-fonts.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="/assets/css/ace-part2.css" class="ace-main-stylesheet" />
    <![endif]-->
    <link rel="stylesheet" href="/assets/css/ace-skins.css" />
    <link rel="stylesheet" href="/assets/css/ace-rtl.css" />
    <style>
        .widget-header {
            overflow: hidden;
        }
        .widget-header.showctl .widget-toolbar-ctl {
            display: block;
        }
        .widget-header .widget-toolbar-box {
            width: 90%;
            overflow: hidden;
        }
        .widget-header .widget-toolbar {
            width: 9999px;
        }

        .widget-toolbar-ctl {
            padding: 6px 8px !important;
            margin-top: 4px !important;
            display: none;
        }
    </style>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="/assets/css/ace-ie.css" />
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="/assets/js/ace-extra.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]>
    <script src="/components/html5shiv/dist/html5shiv.min.js"></script>
    <script src="/components/respond/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body class="no-skin">
<!-- #section:basics/navbar.layout -->
<div id="navbar" class="navbar navbar-default          ace-save-state">
    <div class="navbar-container ace-save-state" id="navbar-container">
        <!-- #section:basics/sidebar.mobile.toggle -->
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
            <span class="sr-only">Toggle sidebar</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>

        <!-- /section:basics/sidebar.mobile.toggle -->
        <div class="navbar-header pull-left">
            <!-- #section:basics/navbar.layout.brand -->
            <a href="#" class="navbar-brand">
                <small>
                    <i class="fa fa-leaf"></i>
                    Ace Admin
                </small>
            </a>

            <!-- /section:basics/navbar.layout.brand -->

            <!-- #section:basics/navbar.toggle -->

            <!-- /section:basics/navbar.toggle -->
        </div>

        <!-- #section:basics/navbar.dropdown -->
        <div class="navbar-buttons navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">
                <li class="grey dropdown-modal">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="ace-icon fa fa-tasks"></i>
                        <span class="badge badge-grey">4</span>
                    </a>

                    <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
                        <li class="dropdown-header">
                            <i class="ace-icon fa fa-check"></i>
                            4 Tasks to complete
                        </li>

                        <li class="dropdown-content">
                            <ul class="dropdown-menu dropdown-navbar">
                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Software Update</span>
                                            <span class="pull-right">65%</span>
                                        </div>

                                        <div class="progress progress-mini">
                                            <div style="width:65%" class="progress-bar"></div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Hardware Upgrade</span>
                                            <span class="pull-right">35%</span>
                                        </div>

                                        <div class="progress progress-mini">
                                            <div style="width:35%" class="progress-bar progress-bar-danger"></div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Unit Testing</span>
                                            <span class="pull-right">15%</span>
                                        </div>

                                        <div class="progress progress-mini">
                                            <div style="width:15%" class="progress-bar progress-bar-warning"></div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Bug Fixes</span>
                                            <span class="pull-right">90%</span>
                                        </div>

                                        <div class="progress progress-mini progress-striped active">
                                            <div style="width:90%" class="progress-bar progress-bar-success"></div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li class="dropdown-footer">
                            <a href="#">
                                See tasks with details
                                <i class="ace-icon fa fa-arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>

                <li class="purple dropdown-modal">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="ace-icon fa fa-bell icon-animated-bell"></i>
                        <span class="badge badge-important">8</span>
                    </a>

                    <ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
                        <li class="dropdown-header">
                            <i class="ace-icon fa fa-exclamation-triangle"></i>
                            8 Notifications
                        </li>

                        <li class="dropdown-content">
                            <ul class="dropdown-menu dropdown-navbar navbar-pink">
                                <li>
                                    <a href="#">
                                        <div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
														New Comments
													</span>
                                            <span class="pull-right badge badge-info">+12</span>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="btn btn-xs btn-primary fa fa-user"></i>
                                        Bob just signed up as an editor ...
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
														New Orders
													</span>
                                            <span class="pull-right badge badge-success">+8</span>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>
														Followers
													</span>
                                            <span class="pull-right badge badge-info">+11</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li class="dropdown-footer">
                            <a href="#">
                                See all notifications
                                <i class="ace-icon fa fa-arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>

                <li class="green dropdown-modal">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="ace-icon fa fa-envelope icon-animated-vertical"></i>
                        <span class="badge badge-success">5</span>
                    </a>

                    <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
                        <li class="dropdown-header">
                            <i class="ace-icon fa fa-envelope-o"></i>
                            5 Messages
                        </li>

                        <li class="dropdown-content">
                            <ul class="dropdown-menu dropdown-navbar">
                                <li>
                                    <a href="#" class="clearfix">
                                        <img src="/assets/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
                                        <span class="msg-body">
													<span class="msg-title">
														<span class="blue">Alex:</span>
														Ciao sociis natoque penatibus et auctor ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>a moment ago</span>
													</span>
												</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="#" class="clearfix">
                                        <img src="/assets/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
                                        <span class="msg-body">
													<span class="msg-title">
														<span class="blue">Susan:</span>
														Vestibulum id ligula porta felis euismod ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>20 minutes ago</span>
													</span>
												</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="#" class="clearfix">
                                        <img src="/assets/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
                                        <span class="msg-body">
													<span class="msg-title">
														<span class="blue">Bob:</span>
														Nullam quis risus eget urna mollis ornare ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>3:15 pm</span>
													</span>
												</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="#" class="clearfix">
                                        <img src="/assets/avatars/avatar2.png" class="msg-photo" alt="Kate's Avatar" />
                                        <span class="msg-body">
													<span class="msg-title">
														<span class="blue">Kate:</span>
														Ciao sociis natoque eget urna mollis ornare ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>1:33 pm</span>
													</span>
												</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="#" class="clearfix">
                                        <img src="/assets/avatars/avatar5.png" class="msg-photo" alt="Fred's Avatar" />
                                        <span class="msg-body">
													<span class="msg-title">
														<span class="blue">Fred:</span>
														Vestibulum id penatibus et auctor  ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>10:09 am</span>
													</span>
												</span>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li class="dropdown-footer">
                            <a href="inbox.html">
                                See all messages
                                <i class="ace-icon fa fa-arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>

                <!-- #section:basics/navbar.user_menu -->
                <li class="light-blue dropdown-modal">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="/assets/avatars/user.jpg" alt="Jason's Photo" />
                        <span class="user-info">
									<small>Welcome,</small>
									Jason
								</span>

                        <i class="ace-icon fa fa-caret-down"></i>
                    </a>

                    <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                        <li>
                            <a href="#">
                                <i class="ace-icon fa fa-cog"></i>
                                Settings
                            </a>
                        </li>

                        <li>
                            <a href="profile.html">
                                <i class="ace-icon fa fa-user"></i>
                                Profile
                            </a>
                        </li>

                        <li class="divider"></li>

                        <li>
                            <a href="#">
                                <i class="ace-icon fa fa-power-off"></i>
                                Logout
                            </a>
                        </li>
                    </ul>
                </li>

                <!-- /section:basics/navbar.user_menu -->
            </ul>
        </div>

        <!-- /section:basics/navbar.dropdown -->
    </div><!-- /.navbar-container -->
</div>

<!-- /section:basics/navbar.layout -->
<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try{ace.settings.loadState('main-container')}catch(e){}
    </script>

    <!-- 左侧菜单 -->
    <jsp:include page="left.jsp"/>

    <!-- /section:basics/sidebar -->
    <div class="iframe_box main-content">
        <div class="widget-box transparent padding-0" id="iframe_tab_box">
            <div class="widget-header">
                <a href="javascript:;" class="pull-left widget-toolbar-ctl" data-action="prev">
                    <i class="glyphicon glyphicon-chevron-left"></i>
                </a>
                <div class="widget-toolbar-box pull-left">
                    <div class="widget-toolbar no-border pull-left">
                        <ul class="nav nav-tabs pull-left" id="recent-tab">
                        </ul>
                    </div>
                </div>
                <a href="javascript:;" class="pull-left widget-toolbar-ctl" data-action="next">
                    <i class="glyphicon glyphicon-chevron-right"></i>
                </a>
            </div>
            <div class="widget-body">
                <div class="widget-main padding-4">
                    <div class="tab-content padding-0 hidden" id="iframe_tab_content">
                    </div>
                </div><!-- /.widget-main -->
            </div><!-- /.widget-body -->
        </div>
    </div>

</div>
<!-- /.main-container -->

<!-- basic scripts -->

<!--[if !IE]> -->
<script src="/components/jquery/dist/jquery.js"></script>

<!-- <![endif]-->

<!--[if IE]>
<script src="/components/jquery.1x/dist/jquery.js"></script>
<![endif]-->
<script type="text/javascript">
    if('ontouchstart' in document.documentElement) document.write("<script src='/components/_mod/jquery.mobile.custom/jquery.mobile.custom.js'>"+"<"+"/script>");
</script>
<script src="/components/bootstrap/dist/js/bootstrap.js"></script>

<!-- page specific plugin scripts -->

<!--[if lte IE 8]>
<script src="/components/ExplorerCanvas/excanvas.js"></script>
<![endif]-->
<script src="/components/_mod/jquery-ui.custom/jquery-ui.custom.js"></script>
<script src="/components/jqueryui-touch-punch/jquery.ui.touch-punch.js"></script>
<script src="/components/_mod/easypiechart/jquery.easypiechart.js"></script>
<script src="/components/jquery.sparkline/index.js"></script>
<script src="/components/Flot/jquery.flot.js"></script>
<script src="/components/Flot/jquery.flot.pie.js"></script>
<script src="/components/Flot/jquery.flot.resize.js"></script>

<!-- ace scripts -->
<script src="/assets/js/src/elements.scroller.js"></script>
<script src="/assets/js/src/elements.colorpicker.js"></script>
<script src="/assets/js/src/elements.fileinput.js"></script>
<script src="/assets/js/src/elements.typeahead.js"></script>
<script src="/assets/js/src/elements.wysiwyg.js"></script>
<script src="/assets/js/src/elements.spinner.js"></script>
<script src="/assets/js/src/elements.treeview.js"></script>
<script src="/assets/js/src/elements.wizard.js"></script>
<script src="/assets/js/src/elements.aside.js"></script>
<script src="/assets/js/src/ace.js"></script>
<script src="/assets/js/src/ace.basics.js"></script>
<script src="/assets/js/src/ace.scrolltop.js"></script>
<script src="/assets/js/src/ace.ajax-content.js"></script>
<script src="/assets/js/src/ace.touch-drag.js"></script>
<script src="/assets/js/src/ace.sidebar.js"></script>
<script src="/assets/js/src/ace.sidebar-scroll-1.js"></script>
<script src="/assets/js/src/ace.submenu-hover.js"></script>
<script src="/assets/js/src/ace.widget-box.js"></script>
<script src="/assets/js/src/ace.settings.js"></script>
<script src="/assets/js/src/ace.settings-rtl.js"></script>
<script src="/assets/js/src/ace.settings-skin.js"></script>
<script src="/assets/js/src/ace.widget-on-reload.js"></script>
<script src="/assets/js/src/ace.searchbox-autocomplete.js"></script>

<!-- the following scripts are used in demo only for onpage help and you don't need them -->
<link rel="stylesheet" href="/assets/css/ace.onpage-help.css" />
<link rel="stylesheet" href="/docs/assets/js/themes/sunburst.css" />

<script type="text/javascript"> ace.vars['base'] = '..'; </script>
<script src="/assets/js/src/elements.onpage-help.js"></script>
<script src="/assets/js/src/ace.onpage-help.js"></script>
<script src="/docs/assets/js/rainbow.js"></script>
<script src="/docs/assets/js/language/generic.js"></script>
<script src="/docs/assets/js/language/html.js"></script>
<script src="/docs/assets/js/language/css.js"></script>
<script src="/docs/assets/js/language/javascript.js"></script>
<!-- 设置窗口大小 -->
<script>
    // 设置窗口大小
    var setIframeHeight = function() {
        var height = document.documentElement.clientHeight;
        height = height - $('#navbar').height() - $('#iframe_tab_box .widget-header').height() - 16;
        $('#iframe_tab_content').css('height', height).removeClass('hidden');
    }
    $(window).on('resize', setIframeHeight).trigger('resize');
    // 打开新的tab
    var openTab = function(url, title, key) {
        var $navtabs = $('#iframe_tab_box .nav-tabs');
        var $tab = $navtabs.find('a[data-key="'+key+'"]');
        if (!$tab.length) {
            $('<li><a data-toggle="tab" data-key="'+key+'" href="#'+key+'-tab">'+title+'<i class="ace-icon fa fa-times"></i></a></li>').appendTo($navtabs);
            $('<div id="'+key+'-tab" class="tab-pane active" style="height: 100%;">'+
                '<iframe src="'+url+'" style="width: 100%; height: 100%; border: none;"></iframe>'+
                '</div>').appendTo('#iframe_tab_content');
            $navtabs.find('a[data-key="'+key+'"]').trigger('click');
        }
        else {
            $navtabs.find('a[data-key="'+key+'"]').trigger('click');
            // setTimeout(function() {
            $tab.trigger('click');
            // }, 100);
        }
    }
    $('#iframe_tab_box .widget-header').on('resize', function() {
        var $self = $(this);
        var $navbars = $self.find('.nav-tabs');
        if ($navbars.width() > $self.width()) {
            $self.addClass('showctl');
        }
        else {
            $self.removeClass('showctl');
        }
    }).on('showLast', function() {
        var $self = $(this);
        var $navbars = $self.find('.nav-tabs');
        var marginLeft  = Math.min(0, $self.width() - $navbars.width());
        $navbars.css('margin-left', marginLeft).data('marginLeft', marginLeft);
    }).on('next', function() {
        var $self = $(this);
        var $navbars = $self.find('.nav-tabs');
        var marginLeft = parseInt($navbars.data('marginLeft')) || 0;
        marginLeft -= 100;
        $navbars.css('margin-left', marginLeft).data('marginLeft', marginLeft);
    }).on('prev', function() {
        var $self = $(this);
        var $navbars = $self.find('.nav-tabs');
        var marginLeft = parseInt($navbars.data('marginLeft')) || 0;
        marginLeft = Math.min(0, marginLeft + 100);
        $navbars.css('margin-left', marginLeft).data('marginLeft', marginLeft);
    }).find('.widget-toolbar-ctl').on('click', function() {
        var $self = $(this);
        $('#iframe_tab_box .widget-header').trigger($self.data('action'));
    });
    // 侦听tab关闭事件
    $('#iframe_tab_box .nav-tabs').on('click', 'i.fa', function() {
        var $li = $(this).parents('li');
        var index = $li.index();
        var activeLast = false;
        if ($li.hasClass('active')) {
            activeLast = true;
        }
        $li.remove();
        $('#iframe_tab_content .tab-pane:eq('+index+')').remove();
        if (activeLast) {
            $('#iframe_tab_box .nav-tabs li:last').find('a').trigger('click');
        }
        $('#iframe_tab_box .widget-header').trigger('resize');
    });
    // 侦听新开窗口事件
    $('#sidebar').on('click', '.nav-list a', function() {
        var $el = $(this);
        if ($el.data('target') == 'menuIframe') {
            try {
                var key = $el.data('key');
                if (!key) {
                    var key = 'iframe_tab'+parseInt(1000000 * Math.random());
                    $el.data('key', key);
                }
                openTab($el.attr('href'), $el.data('tabTitle'), key);
                // 修改菜单高亮
                if (!$el.parent().hasClass('active')) {
                    var $submenu = $el.parents('ul.submenu');
                    var $submenuparent = false;
                    // debugger;
                    if ($submenu.length) {
                        var $submenuparent = $submenu.parent();
                        if ($submenuparent.hasClass('active')) {
                            $submenuparent.find('li.active').removeClass('active');
                        }
                        else {
                            $('#sidebar').find('li.active').removeClass('active');
                            $submenuparent.addClass('active');
                        }
                        $el.parent().addClass('active');
                    }
                    else {
                        $('#sidebar').find('li.active').removeClass('active');
                        $el.parent().addClass('active');
                    }
                }
                $('#iframe_tab_box .widget-header').trigger('resize');
            } catch(e) {
                console.error(e)
            }
            return false;
        }
    }).find('.nav-list a[data-default-tab]').trigger('click');

</script>
<!-- 结束 -->
</body>
</html>
